﻿<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>中国经济发展可视化分析</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/comon0.css">
		<style>
			/* Loading Animation Styles */
			.loading {
				position: fixed;
				width: 100%;
				height: 100%;
				background: white;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1000;
			}

			.container {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.container .preloader {
				animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			@keyframes rotate {
				50% {
					transform: rotate(360deg);
				}

				100% {
					transform: rotate(720deg);
				}
			}

			.preloader span {
				--c: #3f9bf2;
				position: absolute;
				display: block;
				height: 64px;
				width: 64px;
				background: var(--c);
				border: 1px solid var(--c);
				border-radius: 100%;
			}

			.preloader span:nth-child(1) {
				transform: translate(-28px, -28px);
				animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			@keyframes shape_1 {
				60% {
					transform: scale(0.4);
				}
			}

			.preloader span:nth-child(2) {
				transform: translate(28px, -28px);
				animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			@keyframes shape_2 {
				40% {
					transform: scale(0.4);
				}
			}

			.preloader span:nth-child(3) {
				position: relative;
				border-radius: 0px;
				transform: scale(0.98) rotate(-45deg);
				animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			@keyframes shape_3 {
				50% {
					border-radius: 100%;
					transform: scale(0.5) rotate(-45deg);
				}

				100% {
					transform: scale(0.98) rotate(-45deg);
				}
			}

			.shadow {
				position: relative;
				top: 30px;
				left: 50%;
				transform: translateX(-50%);
				display: block;
				height: 16px;
				width: 64px;
				border-radius: 50%;
				background-color: #d9d9d9;
				border: 1px solid #d9d9d9;
				animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
			}

			@keyframes shadow {
				50% {
					transform: translateX(-50%) scale(0.5);
					border-color: #f2f2f2;
				}
			}
		</style>


	</head>
	<script>
		$(window).load(function() {
			$(".loading").fadeOut()
		})

		/****/
		$(document).ready(function() {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
			$(window).resize(function() {
				var whei = $(window).width()
				$("html").css({
					fontSize: whei / 20
				})
			});
		});
	</script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script language="JavaScript" src="js/js.js"></script>
	<body>
		
		
		
		
		
		<div class="canvas" style="opacity: .2">
			<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
		</div>
		<div class="loading">
			<div class="container">
				<div class="preloader">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="shadow"></div>
			</div>
		</div>
		<div class="head">
			<h1><a href="https://gitee.com/iGaoWei/big-data-view" style="color: white">中国经济发展可视化分析</a></h1>
			<div class="weather"><span id="showTime"></span></div>

			<script>
				var t = null;
				t = setTimeout(time, 1000); //開始运行
				function time() {
					clearTimeout(t); //清除定时器
					dt = new Date();
					var y = dt.getFullYear();
					var mt = dt.getMonth() + 1;
					var day = dt.getDate();
					var h = dt.getHours(); //获取时
					var m = dt.getMinutes(); //获取分
					var s = dt.getSeconds(); //获取秒
					document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日 " + h + "时" + m + "分" + s + "秒";
					t = setTimeout(time, 1000); //设定定时器，循环运行     
				}
			</script>


		</div>
		<div class="mainbox">
			<ul class="clearfix">
				<li>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">人口与经济增长率GDP</div>
						<div class="allnav" id="echart1"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">人口与年龄结构</div>
						<div class="allnav" id="echart2"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div style="height:100%; width: 100%;">
							<div class="sy" id="fb1"></div>
							<div class="sy" id="fb2"></div>
							<div class="sy" id="fb3"></div>
						</div>
						<div class="boxfoot">

						</div>
					</div>
				</li>
				<li>
					<div class="bar">
						<div class="barbox">
							<ul class="clearfix">
								<li class="pulll_left counter">1416556284</li>
								<li class="pulll_left counter">1260607</li>
							</ul>
						</div>
						<div class="barbox2">
							<ul class="clearfix">
								<li class="pulll_left">全国总人口 </li>
								<li class="pulll_left">国内生产总值(亿元)</li>
							</ul>
						</div>
					</div>
					<div class="map">
						<div class="map1"><img src="picture/lbx.png"></div>
						<div class="map2"><img src="picture/jt.png"></div>
						<div class="map3"><img src="picture/map.png"></div>
						<div class="map4" id="map_1"></div>
					</div>
				</li>
				<li>
					<div class="boxall" style="height:3.4rem">
						<div class="alltitle">人口与产业结构</div>
						<div class="allnav" id="echart4"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3.2rem">
						<div class="alltitle">全国经济GDP TOP10（亿元）</div>
						<div class="allnav" id="echart5"></div>
						<div class="boxfoot"></div>
					</div>
					<div class="boxall" style="height: 3rem">
						<div class="alltitle">经济发展城市 TOP5</div>
						<div class="allnav" id="echart6"></div>
						<div class="boxfoot"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="back"></div>


		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/area_echarts.js"></script>
		<script type="text/javascript">
			$(window).on('load', function() {
				setTimeout(function() {
					$(".loading").fadeOut();
				}, 5000); // 5 seconds
			});

			$('.counter').countUp({
				delay: 10,
				time: 1000
			});

			(function(fn) {
				fn();
				setInterval(fn, 3000);
			})(function() {
				var dt = new Date();
				document.querySelector(".showTime span").innerHTML =
					dt.getFullYear() + "-" +
					(dt.getMonth() + 1) + "-" +
					dt.getDate() + " " +
					dt.getHours() + ":" +
					dt.getMinutes() + ":" +
					dt.getSeconds() + "";
			});
		</script>
		<audio id="background-music" src="images/video_20241113_184430_edit.mp3" autoplay loop muted></audio>

		
		<script>
		    // 获取音频元素
		    var audio = document.getElementById('background-music');
		
		    // 尝试在页面加载时解除静音并播放音频
		    audio.muted = false;  // 解除静音
		    audio.play().catch(function(error) {
		        console.log("自动播放被限制:", error);
		
		        // 如果播放被阻止，监听用户点击事件来解除静音并播放音频
		        document.addEventListener('click', function() {
		            audio.muted = false;  // 解除静音
		            audio.play();         // 播放音频
		        }, { once: true });
		    });
		</script>
		
	</body>
</html>